<template>
    <div class="index">
        <div class="header" v-if="route?.meta?.header">
            <div class="header-left">
                <img class="header-left-img" :src="userStore.avatar" @click="show = true" />
                <div class="header-left-info">
                    <div class="header-left-info-name">{{ userStore.nickName }}</div>
                    <div class="header-left-info-date">
                        <span class="day">{{ date }}</span>
                        <span class="dividing">|</span>
                        <span class="week">{{ week }}</span>
                        <span class="time"> {{ time }}</span>
                    </div>
                </div>
            </div>
        </div>
        <router-view />
        <!-- <router-view v-slot="{ Component, route }">
           <transition name="fade-transform" mode="out-in">
                <component :is="Component" :key="route.path" />
            </transition>
        </router-view> -->

        <!-- 特殊处理 -->
        <div class="fixed-right" v-if="route?.meta?.header">
            <img class="fixed-right-back" v-if="route?.meta?.back" src="@/assets/images/back.png" @click="back" />
            <img class="fixed-right-ranking" src="@/assets/images/ranking.png" @click="router.push('/ranking')" />
            <img class="fixed-right-record" src="@/assets/images/record.png" @click="router.push('/record')" />
        </div>
        <el-dialog v-model="show" title="设置硬件屏" width="400">
            <el-select v-model="id" placeholder="请选择" @change="change">
                <el-option v-for="item in list" :key="item.id" :value="item.id" :label="item.bindingName" />
            </el-select>
        </el-dialog>
    </div>
</template>

<script setup name="Index">
import { ref, computed, onMounted, watch, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { back } from "@/utils/back";
import useUserStore from "@/store/modules/user";
import { listDevice, } from "@/api/system/device";
const userStore = useUserStore();
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const list = ref([]);//屏配置列表
const id = ref([]);//保存当前选中的屏配置
// 响应式数据
const timestamp = ref(new Date().getTime());
const show = ref(false);//屏配置弹窗

//屏幕尺寸适配
let width = ref(1920);
let height = ref(1080);

function init() {
    resize();
    window.addEventListener("resize", resize);
    getData();
}
function resize() {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
}
// 生命周期
onMounted(() => {
    setTime();
    let data = localStorage.getItem("screen");
    if (data) {
        let screen = JSON.parse(data);
        id.value = screen.id;
        switch (screen.screenType) {
            case 1:
                document.title = '体测系统'
                break;
            case 2:
                document.title = '体测-短跑屏系统'
                break;
            case 3:
                document.title = '体测-长跑屏系统'
                break;
        }
    }
});

//下拉选择器变化 选中的屏数据
async function change(e) {
    let item = list.value.find(item => item.id == e)
    localStorage.setItem("screen", JSON.stringify(item));
    show.value = false;
}

//获取屏配置列表
async function getData() {
    try {
        const { rows } = await listDevice({ schoolId: userStore.deptId });
        list.value = rows;
    } catch (error) {
        console.log(error);
    }

}
// 计算时间属性 年月日 时分秒
const time = computed(() => {
    return proxy.dayjs(timestamp.value).format("HH:mm:ss");
});
const date = computed(() => {
    return proxy.dayjs(timestamp.value).format("YYYY-MM-DD");
});
const week = computed(() => {
    return proxy.dayjs().localeData().weekdays(proxy.dayjs(timestamp.value));
});

//定时器
function setTime() {
    setTimeout(() => {
        timestamp.value = new Date().getTime();
        setTime();
    }, 1000);
}

init();

</script>

<style scoped lang="scss">
.index {
    width: 1920px;
    height: 1080px;
    transform: scale(calc(v-bind(width) / 1920), calc(v-bind(height) / 1080));
    transform-origin: 0 0;
    overflow: hidden;
}

.router {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    // padding-top: 168px;
}

.fixed-right {
    position: fixed;
    right: 60px;
    top: 68px;
    z-index: 1;
    height: 100px;
    width: 300px;

    &-ranking {
        cursor: pointer;

        &:hover {
            transform: scale(1.1);
            opacity: 0.8;
        }

        margin-left: 30px;
        width: 58px;
        height: 58px;
    }

    &-record {
        cursor: pointer;

        &:hover {
            transform: scale(1.1);
            opacity: 0.8;
        }

        margin-left: 30px;
        width: 58px;
        height: 58px;
    }

    &-back {
        cursor: pointer;

        &:hover {
            transform: scale(1.1);
            opacity: 0.8;
        }

        width: 58px;
        height: 58px;
    }
}

.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 87px;
    height: 100px;
    position: fixed;
    top: 68px;
    // z-index: 1;
    box-sizing: border-box;
    &-left {
        display: flex;
        align-items: center;
        &-img {
            cursor: pointer;
            width: 90px;
            height: 90px;
            border-radius: 50%;
        }
        &-info {
            margin-left: 20px;
            &-name {
                font-family: YouSheBiaoTiHei;
                font-size: 50px;
                line-height: 50px;
                color: #ffffff;
            }
            &-date {
                color: #e5e5e5;
                opacity: 0.8;
                margin-top: 10px;
                display: flex;
                height: 30px;
                align-content: center;
                line-height: 30px;
                .day {
                    font-size: 30px;
                    margin-top: 2px;
                    margin-right: 10px;
                }
                .week {
                    font-size: 28px;
                }

                .time {
                    font-size: 30px;
                    margin-left: 14px;
                }
                .dividing {
                    font-size: 28px;
                    margin: 0 20px;
                }
            }
        }
    }

    &-right {
        z-index: 100;
        &-ranking {
            cursor: pointer;
            &:hover {
                transform: scale(1.1);
                opacity: 0.8;
            }
            margin-left: 30px;
            width: 58px;
            height: 58px;
        }
        &-record {
            cursor: pointer;
            &:hover {
                transform: scale(1.1);
                opacity: 0.8;
            }
            margin-left: 30px;
            width: 58px;
            height: 58px;
        }
        &-back {
            cursor: pointer;
            &:hover {
                transform: scale(1.1);
                opacity: 0.8;
            }
            width: 58px;
            height: 58px;
        }
    }
    &-left {
        display: flex;
        align-items: center;
        &-profile {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    }
}
</style>
